<script setup lang="ts">
import {PlayStatus, useAudioPlayerStore} from "@/stores"
import type {PropType} from "vue"

const audioPlay = useAudioPlayerStore()
const props = defineProps({
  song: {
    required: true,
    type: Object as PropType<song_info>
  },
  played: {
    required: true,
    type: Boolean
  },
  themeDarkStyle: {
    required: false,
    default: false,
    type: Boolean
  }
})

const handelPlay = () => {
  if(audioPlay.playingSong)
  {
    if(audioPlay.playingSong.id === props.song.id ) {
      if(audioPlay.status !== PlayStatus.pause)
      {
        audioPlay.setPlayingTime(0)
      }
      audioPlay.play()
    }
    else{
      //设置新歌曲播放及播放列表维护
      audioPlay.setPlayingSong(props.song,true)
    }
  }

}

const handelPause = () => {
  //暂停
  audioPlay.pause()
}


</script>

<template>
  <div class="img_pause" v-if="played" @click="handelPause">

  </div>
  <div class="img_play" v-else @click="handelPlay">

  </div>

</template>

<style lang="scss" scoped>
.img_play{
  background: url(@/assets/res/mv_play.svg);
  height: 18px;
  width: 18px;

  &:hover{
    background: url(@/assets/res/mv_play_hover.svg);
    cursor: pointer;
  }
}

.img_pause{
  background: url(@/assets/res/mv_pause.svg);
  height: 18px;
  width: 18px;

  &:hover{
    background: url(@/assets/res/mv_pause_hover.svg);
    cursor: pointer;
  }
}
</style>